<template>
  <div>
    <div class="profile" @click="editProfile">
      <img :src="profile.head_img" class="avatar" alt />
      <div class="profile-middle">
        <div class="name">
          <span v-if="profile.gender == 1" class="iconfont iconxingbienan"></span>
          <span v-else class="iconfont iconxingbienan"></span>
          {{profile.nickname}}
          <div class="time">2019-10-10</div>
        </div>
      </div>
      <span class="iconfont iconjiantou1"></span>
    </div>
    <cellBar label="我的关注" desc="关注的用户" @skip="$router.push('/myfollow')" />
    <cellBar label="我的跟帖" desc="跟帖/回复" @skip="$router.push('/mycomments')" />
    <cellBar label="我的收藏" desc="文章/视频" @skip="$router.push('/mycollections')" />
    <cellBar label="板块管理" @skip="$router.push('/tabmanager')" />
    <cellBar label="设置" @skip="editProfile" />
    <cellBar label="退出登陆" @skip="logout" />
  </div>
</template>

<script>
import cellBar from "../components/cellBar";
import headerMiddle from "../components/headerMiddle";
export default {
  data() {
    return {
      profile: {}
    };
  },
  components: {
    cellBar,
    headerMiddle
  },
  methods: {
    skipToPage(label) {
      console.log("跳转到:" + label + "页");
      // 其他页面写好后就要这样写跳转到另一个页面
      // this.$router.push()
    },
    logout() {
      // 退出登陆需要清除 token 和 user_id
      localStorage.removeItem("token");
      localStorage.removeItem("user_id");
      // 清除后跳转到登陆页  注意小问题:如果是push会有历史记录所以需要用replace
      this.$router.replace({
        path: "/login"
      });
    },
    editProfile() {
      this.$router.push({
        name: "editprofilePage"
      });
    }
  },
  mounted() {
    this.$axios({
      url: "/user/" + localStorage.getItem("user_id"),
      method: "get",
      headers: {
        Authorization: localStorage.getItem("token")
      }
    }).then(res => {
      this.profile = res.data.data;
      if (!this.profile.head_img) {
        // 如果数据没有头像,设置一个默认值
        this.profile.head_img = "/static/img/xixi.png";
      } else {
        // 如果有头像,我们就拼接数据库基准路径去获取头像
        this.profile.head_img =
          this.$axios.defaults.baseURL + this.profile.head_img;
      }
    });
  }
};
</script>

<style lang="less" scoped>
.profile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8.333vw;
  border-bottom: 5px solid #eee;
}
.profile-middle {
  flex: 1;
  padding-left: 2.778vw;
  font-size: 16px;
}
.time {
  font-size: 14px;
}
.avatar {
  width: 19.444vw;
  border-radius: 50%;
}
</style>